<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>【实战】带搜索功能的课程选项卡</title>
    <link rel="stylesheet" href="../common/css/common.css" />
    <link rel="stylesheet" href="css/course.css" />
</head>

<body>
    <div class="courses-warp">
        <input type="text" id="js-search-input" placeholder="搜索课程" />
        <div class="course-tab">
            <ul class="course-tab-list clearfix">
                <li class="tab-item"><a href="javascript:;" class="course-tab-lk current" data-field="all">全部</a></li>
                <li class="tab-item"><a href="javascript:;" class="course-tab-lk" data-field="free">公益课程</a></li>
                <li class="tab-item"><a href="javascript:;" class="course-tab-lk" data-field="vip">vip课程</a></li>
            </ul>
        </div>
        <div class="course-card-list-warp">
            <ul class="couse-card-list">
            </ul>
        </div>
    </div>
    <div id="js-course-data" style="display: none;">
        [
        {"id":"1","course":"前端开发之企业级深度JavaScript特训课【JS++前端】","classes":"19","teacher":"小野","img":"ecmascript.jpg","is_free":"1","datetime":"1540454477","price":"0"},
        {"id":"2","course":"WEB前端工程师就业班之深度JSDOM+讲师辅导-第3期【JS++前端】","classes":"22","teacher":"小野","img":"dom.jpg","is_free":"0","datetime":"1540454477","price":"699"},
        {"id":"3","course":"前端开发之企业级深度HTML特训课【JS++前端】","classes":"3","teacher":"小野","img":"html.jpg","is_free":"1","datetime":"1540454477","price":"0"},
        {"id":"4","course":"前端开发之企业级深度CSS特训课【JS++前端】","classes":"5","teacher":"小野","img":"css.jpg","is_free":"1","datetime":"1540454477","price":"0"},
        {"id":"5","course":"前端就业班VueJS+去哪儿网+源码课+讲师辅导-第3期【JS++前端】","classes":"50","teacher":"哈默","img":"vuejs.jpg","is_free":"0","datetime":"1540454477","price":"1280"},
        {"id":"6","course":"前端就业班ReactJS+新闻头条实战+讲师辅导-第3期【JS++前端】","classes":"21","teacher":"托尼","img":"reactjs.jpg","is_free":"0","datetime":"1540454477","price":"2180"},
        {"id":"7","course":"WEB前端开发工程师就业班-直播/录播+就业辅导-第3期【JS++前端】","classes":"700","teacher":"JS++名师团","img":"jiuyeban.jpg","is_free":"0","datetime":"1540454477","price":"4980"}
        ]
    </div>
    <!-- 模板 -->
    <script type="text/html" id="js-card-item-tpl">
        <li class="card-item">
            <a href="" class="item-img"><img src="img/{{img}}" /></a>
            <h4 class="item-tt"><a href="" class="tt-lk">{{courseName}}</a></h4>
            <div class="item-line">
                <span class="item-price {{isFree}}">{{price}}</span>
                <span class="item-info">共{{hours}}课时</span>
            </div>
        </li>
    </script>
    <script src="js/course.js"></script>
</body>

</html>